<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}
	.clearfix:after{
		content:"";
		display: block;
		clear:both;
	}

	ul{
		list-style: none;
	}
	p{
		color: red;
	}
	span{
		color: red;
	}
	form{
		width: 1000px;
		margin: auto;
		text-align: center;
		position: relative;
		height: 400px;
	}
	li i{
		position: absolute;
		top: 242px;
		display: block;
		margin: auto;
		width: 50px;
		background: #000;
		color: #fff;
		height: 25px;
		line-height: 25px;
		font-size: 20px;
		text-align: center;
		right: 430px;
		border-radius: 5px;
	}
	li{
		width: 500px;
		height: 50px;
		margin: 10px;
		text-align: right;
	}
	li input{
		height: 25px;
		border-radius: 2px;
	}
	.wrapper{
		width: 500px;
		margin: auto;
		
	}
	.wrapper span{
		background: black;
		display: block;
		margin-left: 80px;
		width: 160px;
		height: 35px;
		line-height: 35px;
		border-radius: 10px;
		margin-top: 20px;
		text-align: center;
	}
	#check1{
		position: absolute;
		right: 616px;
		bottom: 82px;
	}
	a{
		text-decoration: none;
		color: #fff;
	}
	#zhuce{
		width: 100px;
		height: 35px;
		line-height: 35px;
		border-radius: 5px;
		background: #51AD3B;
		font-size:14px;
		border: 0;
		cursor: pointer;
		color: #fff;
		margin-top: 5px;
		margin-right: 167px;
	}
	#e{
		width: 848px;
		text-align: center;
	}
	#fuwu{
		color: #000;
		margin-left: 110px;
	}
	</style>
</head>
<body>
	<div class="wrapper">
		<span><a href="#">注册字母邮箱</a></span>
	</div>
	<form name="regname" action='https://www.baidu.com/'>
		<ul>
			<li>
			<span>*</span>用户：<input name="username" type="text">
				<p id="a"></p>
				
			</li>
			<li>
			<span>*</span>密码：<input name="passworld" type="password">
				<p id="b"></p>
			</li>
			<li>
			<span>*</span>确认密码：<input name="passworldConf" type="password">
				<p id="c"></p>
			</li>
			<li>
			<span>*</span>手机号：<input name="email" type="text">
				<p id="d"></p>
			</li>
			<li>
				<span>*</span>验证码：<input name="yzm" type="text">
				<i id = "gb"></i>
				<p id = "m"></p>
			</li>
		</ul>
		<input  id = "check1" type="checkbox" name="check"> 
		<span id = "fuwu">同意"服务条款"和"用户须知"、"隐私权相关政策"</span>
		<p id="e"></p>
		<input id="zhuce" type="submit" value="点击注册" onclick="return checkForm()">
	</form>

	<script type="text/javascript">
		function checkForm(){
			var reg=document.forms["regname"];
			var u=regname.username;
			var p=regname.passworld;
			var pc=regname.passworldConf;
			var e=regname.email;
			var yzm=regname.yzm;
			var gb=document.getElementById("gb");
			var f=/^[a-zA-Z0-9]\w{5,14}$/;// \w包含所有数字字母下划线,6-15位字符，英文字母开头，只能包含英文数字
			var g=/^1[34578][0-9]{9}$/;
			var a = String(Math.random());
			var b=document.getElementById("gb").innerHTML;
			var ck=regname.check;
			var status=true;	//状态的初始值
			if(!f.test(u.value)){
				document.getElementById("a").innerHTML="6~18个字符，可使用字母、数字、下划线,需以字母开头"
				status=false;	
			}
			if(u.value==""){
				document.getElementById("a").innerHTML="用户名不能为空"
				status=false;
			}
			if(!g.test(e.value)){
				document.getElementById("d").innerHTML="请输入正确的手机号"
				status=false;
			}
			if(p.value==""){
				document.getElementById("b").innerHTML="密码不能为空"
				status=false;
			}
			if(pc.value==""){
				document.getElementById("c").innerHTML="重复密码不能为空"
				status=false;
			}
			if(e.value==""){
				document.getElementById("d").innerHTML="手机号不能为空"
				status=false;
			}
			if(yzm.value != b){
				document.getElementById("m").innerHTML="请输入正确的验证码"
				status=false;
			}
			if(!ck.checked){
				document.getElementById("e").innerHTML="请接受服务条款"
					status=false;
			}
			return status;//返回检查结果
		}
		window.onload=function(){
			var reg=document.forms["regname"];
			var u=regname.username;
			var p=regname.passworld;
			var pc=regname.passworldConf;
			var e=regname.email;
			var yzm=regname.yzm;
			var gb=/^[0-9]{0-9}{4}$/;
			var f=/^[a-zA-Z]\w{5,14}$/;
			var g=/^1[34578][0-9]{9}$/;
			var h=/^[a-zA-Z]\w{5,14}$/;
			//随机数字+string转换成字符串！因为底下要截取 0
			var a = String(Math.random());
				substr(start,length)
			var b = a.substr(2,4);
			document.getElementById("gb").innerHTML=b;
			u.onfocus=function(){
				document.getElementById("a").innerHTML="<font color=#999>请输入用户名</font>";
			}
			p.onfocus=function(){
				document.getElementById("b").innerHTML="<font color=#999>请输入密码</font>";
			}
			pc.onfocus=function(){
				document.getElementById("c").innerHTML="<font color=#999>请再次输入密码</font>";
			}
			e.onfocus=function(){
				document.getElementById("d").innerHTML="<font color=#999>请输入手机号</font>";
			}
			yzm.onfocus=function(){

				document.getElementById("m").innerHTML="<font color=#999>请输入验证密码</font>";
			}
			u.onblur=function(){
				if(f.test(u.value)){
					document.getElementById("a").innerHTML="<font color=green size=5px>√√√</font>";
				}else if(u.value==""){
					document.getElementById("a").innerHTML="<font color=red>请输入用户名</font>";
				}
				else{
					document.getElementById("a").innerHTML="6~18个字符，可使用字母、数字、下划线，需以字母开头"
				}
			}
			p.onblur=function(){
				if(h.test(p.value)){
					document.getElementById("b").innerHTML="<font color=green size=5px>√√√</font>";
				}else{
					document.getElementById("b").innerHTML="6~18个字符，可使用字母、数字、，需以字母开头";
				}
				if(p.value==""){
					document.getElementById("b").innerHTML="<font color=red>请输入密码！</font>";
				}
				if(pc.value!=""){
					if(pc.value!=p.value){
						document.getElementById("b").innerHTML="<font color=red size=5px>密码不一致</font>";
					}
				}
			}
			pc.onblur=function(){
				if(h.test(pc.value)&&pc.value==p.value){
					document.getElementById("c").innerHTML="<font color=green size=5px>√√√</font>";
					document.getElementById("b").innerHTML="<font color=green size=5px>√√√</font>";
				}else{
					document.getElementById("c").innerHTML="<font color=red>密码不一致</font>";
				}
				if(pc.value==p.value&&!h.test(pc.value)){
					document.getElementById("c").innerHTML="<font color=red>密码不足6位</font>";
				}
				if(pc.value==""){
					document.getElementById("c").innerHTML="<font color=red>请输入确认密码！</font>";
				}
				
			}
			e.onblur=function(){
				if(g.test(e.value)){
					document.getElementById("d").innerHTML="<font color=green size=5px>√√√</font>";
				}else{
					document.getElementById("d").innerHTML="请输入正确的手机号！";
				}
			}
			yzm.onblur=function(){
				if(yzm.value==""){
					document.getElementById("m").innerHTML="<font color=red>请输入验证码！</font>";
				}
				if(yzm.value!=b){
					document.getElementById("m").innerHTML="<font color=red>请输入正确验证码！</font>";
				}
				if(yzm.value==b){
					document.getElementById("m").innerHTML="<font color=green size=5px>√√√</font>";
				}
			}
		}
		
		
		//var phoneReg=/^1[]{m,n}$/
	//[]表示取里面的任意一个字符
	//var phoneReg=/^1[34578][0-9]{9}$/
	</script>
</body>

</html>

